﻿@model List<VenueModel>
@{
    ViewBag.Title = "场馆列表";
}
@if (!Model.Any())
{
    <h3 style="text-align: center">没有查询到数据</h3>
}
else
{
    <ul>
        @foreach (var item in Model)
        {
            <li>
                @Html.Partial("_PartialVenue",item)
                @if (!string.IsNullOrEmpty(item.FrontImageUrl))
                {
                    <div class="front-image">
                        <img src="@Url.Content(item.FrontImageUrl)"/>
                    </div>
                }
                <a href="@Url.Action("Book",new {id=item.Id})" class="book-btn"><p>预定</p></a>
            </li>
        }
    </ul>
}
<div class="bar-footer">
    <a href="/Venue/Record">
        已 定 场 馆 查 询
    </a>
</div>
@section css
{
    <style>
        body {
            padding: 0 15px 60px;
        }
        li {
            position: relative;
        }
        li > .title {
            background-size: 100% auto;
            background-repeat: no-repeat;
            margin: auto -15px;
            height: 100px;
            color: white;
        }
        li > .title > h1 {
            margin: 0 0 0 15px;
            padding-top: 30px;
        }
        dt {
            color: #3e3d3d;
        }

        dd {
            font-size: 18px;
            margin: 5px 0 15px 0;
        }
        .book-btn {
            position: absolute;
            top: 110px;
            right: 0;
            border-radius: 50%;
            background: #ccc;
            height: 50px;
            width: 50px;
            font-size: 16px;
            display: table;
        }
        .book-btn p {
            text-align: center;
            display: table-cell;
            color: black;
            vertical-align: middle;
        }

        .bar-footer {
            position: fixed;
            bottom: 2px;
            text-align: center;
            left: 0;
            right: 0;
        }
        .bar-footer a {
            width: 80%;
            border-radius: 10px;
            border: 2px solid black;
            background: white;
            color: black !important;
            font-size: 16px;
            padding: 10px;
            display: inherit;
            margin: 0 auto;
        }

        .front-image {
            width: 100%;
            margin-bottom: 15px;
        }
        .front-image img {
            width: 100%;
            height: auto;
        }
    </style>
}
